<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index04</title>
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<div id="root">
    <div id="wrapper">
        <div id="left">
            <h2>下拉菜单</h2>
            <p>鼠标移动到按钮上打开下拉菜单。</p>
            <div class="left-wrapper">
                <button class="left-button">下拉菜单</button>
                <div class="left-box">
                    <button class="left-sub-button">菜单 1</button>
                    <button class="left-sub-button">菜单 2</button>
                    <button class="left-sub-button">菜单 3</button>
                </div>
            </div>
        </div>
        <div id="right">
            <h2>侧边导航</h2>
            <div class="right-box">
                <button class="right-button" onclick="window.location='#home'">主页</button>
                <button class="right-button" onclick="window.location='#news'">新闻</button>
                <button class="right-button" onclick="window.location='#relation'">联系</button>
                <button class="right-button" onclick="window.location='#about'">关于</button>
            </div>
            <p>背景颜色添加到链接中显示链接的区域</p>
            <p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
        </div>
    </div>
</div>
</body>
</html>